/*
*===============DdmgCloudPlatform3 V2.0===============
* DdmgCloudPlatform3 V2.0
* Copyright@大大买钢2018,All Rights Reserved
* Author: 陈军华(840226425@qq.com)
* Date: 2018/8/6  18:30
* TODO: 合伙人申请
*===============DdmgCloudPlatform3 V2.0===============
*/
<template>
  <div class="parter">
    <el-container>
      <el-header class="ft-head">
        <div class="head-show display-flex-between">
          <div class="log">
            <span class="title">申请成为合伙人</span>
          </div>
          <div class="has-account">
            <!-- <Navbatwo></Navbatwo> -->
          </div>
        </div>
      </el-header>
      <el-main>
        <!--信息输入-->
        <div class="login-box" v-show="status != 3">
          <div class="login-head display-flex-between">
            <div class="tips">申请成为合伙人<span v-show="false" class="english">APPLY FOR A PARTNER</span></div>
            <el-steps v-show="operaUserInfoQueryState" :active="active" align-center>
              <el-step title="填写资料"></el-step>
              <el-step title="审核中"></el-step>
              <el-step title="审核结果"></el-step>
            </el-steps>
          </div>
        </div>
        <div class="login-input">
          <!-- 基本资料-->
          <div v-if="status == 1" class="filter-container bottom-pd">
            <el-form ref="operaUserInfoQuery" :model="operaUserInfoQuery" :rules="operaUserInfoQueryRules">
              <el-row>
                <el-col :span="24">
                  <el-form-item  prop="" :label-width="formLabelWidth_70">
                    <span class="partner-title">基本资料</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="姓名：" prop="fullname" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.fullname"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="身份证号：" prop="identity" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable maxlength="18" v-model.trim="operaUserInfoQuery.identity"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item class="identity-pic">
                    <div class="idcard-pic">身份证人像面</div>
                    <el-upload-image-to-oss
                      title=""
                      v-model="operaUserInfoQuery.identity_img1"
                      label-width="120px"
                      dir="images"
                      sub-dir="identity"
                      :append-to-body="true"
                      :tip-src="identityImg1"
                      width="140px"
                      height="100px"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item class="identity-pic">
                    <div class="idcard-pic">身份证国徽面</div>
                    <el-upload-image-to-oss
                      title=""
                      v-model="operaUserInfoQuery.identity_img2"
                      label-width="120px"
                      dir="images"
                      :tip-src="identityImg2"
                      sub-dir="identity"
                      :append-to-body="true"
                      width="140px"
                      height="100px"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item class="identity-pic">
                    <div class="idcard-pic">手持身份证照</div>
                    <el-upload-image-to-oss
                      title=""
                      v-model="operaUserInfoQuery.identity_img3"
                      label-width="120px"
                      :tip-src="identityImg3"
                      dir="images"
                      sub-dir="identity"
                      :append-to-body="true"
                      width="140px"
                      height="100px"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="城市：" prop="cityData" :label-width="formLabelWidth_70">
                    <el-cascader
                      clearable
                      :options="options"
                      v-model.trim="operaUserInfoQuery.cityData">
                    </el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="开户行：" prop="deposit_bank" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.deposit_bank"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="账号：" prop="bank_account" :label-width="formLabelWidth_70" style="position: relative;">
                    <el-input type="text" clearable maxlength="19" v-model.trim="operaUserInfoQuery.bank_account"></el-input>
                    <span class="bank-account-tips">该账号作为合作收益转账账号</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="户名：" prop="account_name" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.account_name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="是否已婚：" prop="is_spouse" :label-width="formLabelWidth_70">
                    <el-radio-group v-model.trim="operaUserInfoQuery.is_spouse">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="operaUserInfoQuery.is_spouse == 1">
                <el-col :span="24" >
                  <el-form-item label="配偶姓名：" prop="spouse_name" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.spouse_name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-else class="el-form-hide">
                <el-col :span="24">
                  <el-form-item label="配偶姓名：" prop="" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.spouse_name" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="operaUserInfoQuery.is_spouse == 1" >
                <el-col :span="24">
                  <el-form-item label="配偶身份证：" prop="spouse_identity" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable :maxlength="18" v-model.trim="operaUserInfoQuery.spouse_identity"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-else class="el-form-hide">
                <el-col :span="24">
                  <el-form-item label="配偶身份证：" prop="" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.spouse_identity" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="银行征信报告：" :label-width="formLabelWidth_70" class="idcard-credit_report">
                    <el-upload-image-to-oss
                      v-model="operaUserInfoQuery.credit_report"
                      label-width="120px"
                      dir="images"
                      sub-dir="creditReport"
                      :append-to-body="true"
                      width="75px"
                      height="75px"
                      />
                    <!--<el-upload-file-to-oss-->
                      <!--title="支持扩展名：PDF，DOC,DOCX..."-->
                      <!--v-model.trim="operaUserInfoQuery.credit_report"-->
                      <!--label-width="120px"-->
                      <!--dir="files"-->
                      <!--sub-dir="creditReport"-->
                      <!--:append-to-body="true"-->
                      <!--width="140px"-->
                      <!--height="100px"-->
                      <!--/>-->
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item :label-width="formLabelWidth_70">
                    <el-button class="no-radio" type="primary" @click="toNextPartner('operaUserInfoQuery')">下一步</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <!--其他信息-->
          <div v-else-if="status == 2">
            <el-form ref="operaUserInfoQuery" :model="operaUserInfoQuery" :rules="operaUserInfoQueryRules_s">
              <el-row>
                <el-col :span="24">
                  <el-form-item  prop="" :label-width="formLabelWidth_70">
                    <span class="partner-title">其他信息</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="有无关联企业：" prop="" :label-width="formLabelWidth_70">
                    <el-radio-group v-model.trim="operaUserInfoQuery.flag1">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="padding-bottom: 10px;">
                <el-col :span="24">
                  <el-form-item v-if="operaUserInfoQuery.flag1 == 1" label="相关企业名称：" prop="flag1_name" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.flag1_name"></el-input>
                  </el-form-item>
                  <el-form-item v-else class="el-form-hide" label="相关企业名称：" prop="" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.flag1_name" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="有无授信需求：" prop="" :label-width="formLabelWidth_70">
                    <el-radio-group v-model.trim="operaUserInfoQuery.is_credit">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="padding-bottom: 20px;">
                <el-col :span="24">
                  <el-form-item v-if="operaUserInfoQuery.is_credit == 1" label="拟申请授信额度：" prop="expected_credit" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.expected_credit"></el-input>
                    <span class="add-margin">万元</span>
                  </el-form-item>
                  <el-form-item v-else class="el-form-hide" label="拟申请授信额度：" prop="" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.expected_credit" disabled></el-input>
                    <span class="add-margin">万元</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="进一年钢材销量：" prop="" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.sales_volume"></el-input>
                    <span class="add-margin">吨</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="市场客户占比：" prop="" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.market_share"></el-input>
                    <span class="add-margin">%</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="终端客户占比：" prop="" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.terminal_share"></el-input>
                    <span class="add-margin">%</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item class="main_variety_List" label="主营品种：" prop="main_value" :label-width="formLabelWidth_70">
                    <el-checkbox-group v-model.trim="operaUserInfoQuery.main_value">
                      <el-checkbox v-for="name in main_variety_list" :key="name" :label="name" :value="name"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="主要供应商：" prop="" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.supplier"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="主要客户：" prop="" :label-width="formLabelWidth_70">
                    <el-input type="text" clearable v-model.trim="operaUserInfoQuery.customer"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="业务情况说明：" prop="" :label-width="formLabelWidth_70">
                    <el-input type="textarea" clearable v-model.trim="operaUserInfoQuery.work"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item class="partner-agreement" label="" prop="type" :label-width="formLabelWidth_70" >
                <el-checkbox-group v-model.trim="operaUserInfoQuery.type">
                  <el-checkbox name="type">我已阅读且同意</el-checkbox>
                </el-checkbox-group>
                <span @click="showAgreements" class="agreements">(大汉电子商务有限公司业务合伙人合作协议)</span>
              </el-form-item>
              <el-form-item style="text-align: center;">
                <el-button type="info" @click="status--">上一步</el-button>
                <el-button type="primary" @click="sbmInformation('operaUserInfoQuery')">提交审核</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!--提交成功-->
          <div v-else class="show-users">
            <el-steps :active="2" align-center>
              <el-step title="实名信息"></el-step>
              <el-step title="审核中"></el-step>
              <el-step title="审核结果"></el-step>
            </el-steps>
            <div class="to-login">
              <p>恭喜您资料提交成功，资料审核中...</p>
              <p class="cur">审核结构将通过短信的方式通知您，请耐心等待</p>
              <p class="to-back">{{endTime}}s自动返回</p>
            </div>
          </div>
          <!-- 基本资料-->
        </div>
      </el-main>
    </el-container>
    <!--底部链接-->
    <!--<footer-box></footer-box>-->
    <!--是否实名认证-->
    <real-name-dialog ref="realNameDialog" />
    <!--大大买钢平台服务协议-->
    <!-- <agreements-dialog ref="agreementsDialog" /> -->
  </div>
</template>
<script>
// import footerBox from "@/components/Footer";
// import Navbatwo from "@/components/UI/Navbatwo";
import { throttle } from "@/utils/index";
import { isCrad, phoneNumber, isBackCard } from "@/utils/validate";
import identityImg1 from "../../assets/images/identity_img1.png";
import identityImg2 from "../../assets/images/identity_img2.png";
import identityImg3 from "../../assets/images/identity_img3.png";
import { createNamespacedHelpers } from "vuex";
import realNameDialog from "./components/RealNameDialog";
// import ElUploadImageToOss from "@/components/UI/ElUploadImageToOss";
// import ElUploadFileToOss from "@/components/UI/ElUploadFileToOss";
// import agreementsDialog from "@/components/AgreementsDialog";
// import { provinceAndCityData, CodeToText } from "element-china-area-data";
const { mapActions } = createNamespacedHelpers("ddmg/register");

export default {
  name: "partner",
  components: {
    // footerBox,
    // Navbatwo,
    realNameDialog,
    // agreementsDialog,
    // ElUploadImageToOss,
    // ElUploadFileToOss,
  },
  data() {
    return {
      identityImg1: identityImg1,
      identityImg2: identityImg2,
      identityImg3: identityImg3,
      main_variety_List: [],
      is_copartner: {
        real_name_state: "",
      }, //是否申请合伙人
      status: 1, //基础资料

      endTime: 5,
      countTime: 60, //验证获取时间间隔
      active: 1,
      countTimeStates: true, //是否获取验证码
      operaUserInfoQueryState: true, //是否提交成功

      main_variety_list: ["建材", "型材", "管材", "板材", "卷材", "其他"],
      options: provinceAndCityData, // 省市集合
      operaUserInfoQuery: {
        cityData: [],
        name: "",
        user_code: "",
        phone: "",
        identity: "",
        province: "",
        city: "",
        is_spouse: 1,
        spouse_identity: "",
        spouse_name: "",
        flag1: 1,
        fullname: "",
        is_credit: 1,
        deposit_bank: "",
        account_name: "",
        bank_account: "",
        identity_img1: "",
        identity_img2: "",
        identity_img3: "",
        credit_report: "",
        flag1_name: "",
        expected_credit: "",
        sales_volume: "",
        market_share: "",
        terminal_share: "",
        main_value: [], // 主营品种
        main_variety: "",
        institutional_id: "",
        supplier: "",
        work: "",
        customer: "",
        active_time: "",
      },
      operaUserInfoQueryRules: {
        cityData: [
          {
            required: true,
            type: "array",
            message: "请选择城市",
            trigger: "change",
          },
        ],
        fullname: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        deposit_bank: [
          {
            required: true,
            message: "银行名称(长度不能少于两位)",
            min: 2,
            trigger: "blur",
          },
        ],
        bank_account: [
          {
            required: true,
            validator: isBackCard,
            trigger: "blur",
          },
        ],
        account_name: [
          {
            required: true,
            message: "请输入户名(长度不能少于两位)",
            min: 2,
            trigger: "blur",
          },
        ],
        identity: [
          {
            required: true,
            validator: isCrad,
            trigger: "blur",
          },
        ],
        spouse_name: [
          {
            required: true,
            message: "请输入配偶姓名",
            trigger: "blur",
          },
        ],
        spouse_identity: [
          {
            required: true,
            min: 18,
            max: 18,
            message: "请输入18位身份证",
            trigger: "blur",
          },
        ],
      },
      operaUserInfoQueryRules_s: {
        flag1_name: [
          {
            required: true,
            message: "请输入相关企业名称",
            trigger: "blur",
          },
        ],
        expected_credit: [
          {
            required: true,
            message: "请输入授信额度",
            trigger: "blur",
          },
        ],
        main_value: [
          {
            type: "array",
            required: true,
            message: "请选择主营品种",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "请勾选并认真阅读大汉电子商务有限公司业务合伙人合作协议",
            trigger: "change",
          },
        ],
      },

      formLabelWidth_70: "120px",
      getPartnerInfoState: true, //是否获取实名认证
      editGetPartnerInfoState: false, // 是否编辑获取已实名图片
    };
  },
  mounted() {
    this.getPersonInfo().then((res) => {
      let { info } = res.data;
      if (info.real_name_state === 0 || info.real_name_state === 3) {
        this.$refs.realNameDialog.openDialog();
      } else {
        this.isRealName().then((res) => {
          let { data } = res;
          this.operaUserInfoQuery.fullname = data.fullname;
          this.operaUserInfoQuery.phone = data.phone;
          this.operaUserInfoQuery.identity = data.identity;
          this.operaUserInfoQuery.identity_img1 = data.identity_img1;
          this.operaUserInfoQuery.identity_img2 = data.identity_img2;
          this.operaUserInfoQuery.identity_img3 = data.identity_img3;
        });
      }
    });
  },
  methods: {
    ...mapActions(["getPersonInfo", "updatePartner", "isRealName"]),

    // 显示服务协议
    showAgreements() {
      // this.$refs.agreementsDialog.closeDialog();
    },
    //下一步
    toNextPartner: throttle(function(operaUserInfoQuery) {
      this.$refs[operaUserInfoQuery].validate((valid) => {
        if (valid) {
          if (this.is_copartner.real_name_state != 2) {
            if (this.getPartnerInfoState) {
              if (this.operaUserInfoQuery.identity_img1 == "" || this.operaUserInfoQuery.identity_img2 == "" || this.operaUserInfoQuery.identity_img3 == "") {
                this.$message({
                  center: true,
                  message: "请上传身份证照片",
                  type: "error",
                });
              } else {
                this.status += 1;
              }
            } else {
              this.status += 1;
            }
          } else {
            this.status += 1;
          }
        }
      });
    }),
    //自动返回
    autoBack() {
      var autoTime = setInterval(() => {
        this.endTime -= 1;
        if (this.endTime == 0) {
          this.endTime = 5;
          this.operaUserInfoQueryState = true;
          window.history.go(-1);
          clearInterval(autoTime);
        }
      }, 1000);
    },
    //定时器
    reduceTime() {
      var reduceSet = setInterval(() => {
        this.countTime -= 1;
        if (this.countTime == 0) {
          this.countTimeStates = !this.countTimeStates;
          this.countTime = 60;
          clearInterval(reduceSet);
        }
      }, 1000);
    },
    // 提交资料
    sbmInformation: throttle(function(operaUserInfoQuery) {
      this.operaUserInfoQuery.main_variety = this.operaUserInfoQuery.main_value.join(",");
      this.operaUserInfoQuery.province = CodeToText[this.operaUserInfoQuery.cityData[0]];
      this.operaUserInfoQuery.city = CodeToText[this.operaUserInfoQuery.cityData[1]];
      this.$refs[operaUserInfoQuery].validate((valid) => {
        if (valid) {
          this.updatePartner(this.operaUserInfoQuery).then((res) => {
            if (res.code === 200) {
              this.status += 1;
              this.autoBack();
            }
          });
        } else {
          return false;
        }
      });
    }),
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.parter {
  .el-col {
    height: auto;
  }
  .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
  }
  .el-cascader,
  .el-cascader--mini {
    width: 100%;
  }
  .grid-content {
    padding: 0;
  }
  .el-checkbox-group {
    float: left;
  }
  .idcard-pic {
    position: relative;
  }
  .idcard-pic::before {
    position: absolute;
    left: 49px;
    top: 0;
    z-index: 1;
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
  .idcard-credit_report {
    position: relative;
  }
  .idcard-credit_report::before {
    position: absolute;
    left: 17.5px;
    top: 7.5px;
    z-index: 1;
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
  .main_variety_List {
    position: relative;
    .el-form-item__label::before {
      position: absolute;
      left: 40px;
      top: 0;
      z-index: 1;
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }
  .change-width {
    width: 41%;
  }
  .add-margin {
    margin-left: 10px;
  }
  .el-container {
    min-height: 900px;
  }
  .el-checkbox + .el-checkbox {
    margin-left: 10px;
  }
  /*.el-dialog--center .el-dialog__header {*/
    /*padding: 15px 0;*/
    /*border-top: 2px solid #0886ea;*/
  /*}*/
  .el-dialog--center .el-dialog__body {
    padding: 5px;
  }
  position: relative;
  .bank-account-tips {
    display: block;
    width: 250px;
    padding-left: 5px;
    position: absolute;
    top: 0;
    left: 70%;
    z-index: 1;
  }
  .identity-pic {
    text-align: center;
  }
  .el-form-hide .el-form-item__error {
    display: none;
  }
  .agreements-top {
    .agreements-title {
      font-weight: bold;
    }
    /*.el-dialog__header {*/
      /*border-top: 3px solid #0886ea;*/
    /*}*/
    .agreements-footer {
      border-top: 2px solid #f4f4f4;
      padding-top: 16px;
    }
  }
  width: 100%;
  /*head*/
  .ft-head {
    width: 100%;
    box-shadow: 4px 4px 2px #e5e5e5;
  }
  .display-flex-between {
    display: flex;
    justify-content: space-between;
  }
  .dialog-title {
    text-align: center;
    font-weight: bold;
    color: #333;
    display: block;
  }
  .partner-title {
    font-weight: bold;
  }
  .head-show {
    width: 100%;
    height: 60px;
    margin: 0 auto;
    line-height: 60px;
    .log {
      height: 60px;
      background: url(../../assets/images/logo.png) no-repeat 0 center;
      background-size: 150px 40px;
      .title {
        display: inline-block;
        line-height: 60px;
        font-size: 18px;
        color: #333333;
        margin-left: 158px;
      }
    }
    .has-account {
      position: relative;
      width: 60px;
      cursor: pointer;
      font-size: 14px;
      color: #a9a9a9;
      .tips {
        margin-left: 16px;
        color: #f56a00;
        .right {
          font-size: 20px;
          margin-left: 8px;
        }
      }
    }
  }
  /*body*/
  .el-main {
    min-height: 500px;
    padding: 0 20px !important;
    .login-box {
      max-width: 1200px;
      margin: 0 auto;
      height: 80px;
      border-bottom: 1px dashed #ccc;
      .tips {
        position: relative;
        padding: 30px 0 0 10px;
        font-size: 18px;
        color: #333;
        .english {
          margin-left: 8px;
          font-size: 14px;
          color: #ccc;
        }
      }
      .tips:before {
        content: "";
        display: table;
        width: 2px;
        height: 20px;
        background: #0886ea;
        position: absolute;
        top: 30px;
        left: 0;
        z-index: 1;
      }
      .el-steps {
        margin-top: 24px;
        width: 500px;
        .el-step__title {
          line-height: 24px;
        }
        .el-step__icon {
          width: 22px;
          height: 22px;
        }
        .is-finish {
          .el-step__icon {
            color: #fff;
            background: #0886ea;
          }
        }
        .el-step__line {
          left: 65%;
          right: -35%;
        }
        .is-process {
          border-color: #ccc;
          color: #ccc;
          font-weight: 400;
        }
      }
    }
    .show-users {
      .el-steps {
        margin: 0 auto 20px auto;
        width: 80%;
        .el-step__title {
          line-height: 34px;
        }
        .el-step__icon {
          width: 22px;
          height: 22px;
        }
        .is-finish {
          .el-step__icon {
            color: #fff;
            background: #0886ea;
          }
        }
        .el-step__line {
          left: 65%;
          right: -35%;
        }
        .is-process {
          border-color: #ccc;
          color: #ccc;
          font-weight: 400;
        }
      }
    }
    .login-input {
      max-width: 1000px;
      box-sizing: border-box;
      margin: 100px auto 100px auto;
      .adcolor {
        background: #ccc;
        border-color: transparent;
      }
      textarea {
        width: 70%;
        min-height: 120px !important;
      }
      .partner-agreement {
        .agreements {
          color: #0886ea;
        }
      }
      .to-login {
        padding-top: 140px;
        background: url(../../assets/images/forsuccess.png) no-repeat center 10px;
        background-size: 107px 110px;
        text-align: center;
        p {
          margin: 8px 0;
          font-size: 14px;
          font-weight: bold;
          color: #404040;
        }
        .cur {
          font-weight: 400;
          color: #d2d2d2;
        }
        .login-radio {
          margin-top: 16px;
          width: 140px;
        }
        .to-back {
          color: #0886ea;
          font-weight: 400;
        }
      }
      .el-row {
        width: 100%;
        margin-bottom: 0;
      }
      .el-card {
        height: 370px;
        transition: all 0.3s;
      }
      .el-form {
        max-width: 600px;
        margin: 0 auto;
      }
      .el-input {
        width: 70%;
      }
      .get-code-button {
        border-radius: 0;
        margin-left: 16px;
      }
      .no-radio {
        width: 70%;
        margin-left: 0;
      }
      .toStates {
        background: #ccc !important;
        border: none;
      }
      .el-card {
        font-size: 30px;
        color: #0886ea;
        .add-padding {
          padding-top: 18px;
          border-top: 1px solid #0886ea;
        }
      }
    }
  }
}
</style>
